<!DOCTYPE html>
<!--[if IE 8]>
<html lang="zh-CN" class="ie8" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zh-cmn-Hans-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<!--<![endif]-->
<head th:replace="head :: common_header(~{::title},~{::link})">
    <title>庭审信息管理平台</title>
    <!-- ================== BEGIN PAGE LEVEL CSS STYLE ================== -->
    <link rel="stylesheet" th:href="@{/assets/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css}">
    <link rel="stylesheet" th:href="@{/assets/plugins/bootstrap-table/bootstrap-table.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/loading.css}">
    <link rel="stylesheet" th:href="@{/assets/css/judge.css}"/>
    <!-- ================== END PAGE LEVEL CSS STYLE ================== -->
</head>
<body>
<!-- begin #page-container -->
<div id="page-container" class="page-container fade page-without-sidebar">
    <div th:replace="~{head.html :: head_nav_user(@{/judge/index},@{/judge/favorite})}"></div>
    <!-- begin #content -->
    <div id="content" class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="panel cmp-panel cmp_index_top_panel">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="row">
                                    <div class="col-sm-5">
                                        <div class="cmp-plugins-count center">
                                            <img class="group-title-user-img" th:src="@{/assets/img/user-15.jpg}"/>
                                            <div class="group-title-user">
                                                <div class="group-title-user-name">
                                                    <span>姓　　名：</span>
                                                    <span>admin</span>
                                                </div>
                                                <div class="group-title-user-court">
                                                    <span>所属法院：</span>
                                                    <span>11高院</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-7">
                                        <div class="cmp-plugins-count center">
                                            <div class="cmp-plugins-title group-title-rank-title">您在本院开庭数、时长分别排在第</div>
                                            <div class="group-title-rank">
                                                <div class="group-title-rank-num" id="num-ranking">
                                                    <span class="group-title-rank-num-1">1</span>
                                                    <span class="group-title-rank-num-2">2</span>
                                                    <span class="group-title-rank-num-3">3</span>
                                                    <span class="group-title-rank-num-4">4</span>
                                                </div>
                                                <div class="group-title-rank-num" id="time-ranking">
                                                    <span class="group-title-rank-num-1">1</span>
                                                    <span class="group-title-rank-num-2">2</span>
                                                    <span class="group-title-rank-num-3">3</span>
                                                    <span class="group-title-rank-num-4">4</span>
                                                </div>
                                            </div>
                                            <div class="cmp-plugins-title group-title-rank-title">名</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="cmp-plugins-count center">
                                    <div class="cmp-plugins-title">开庭数</div>
                                    <div class="cmp-plugins-count-num cmp-plugins-title-closed">
                                        <span class="cmp-plugins-count-num-1">0</span>
                                        <span class="cmp-plugins-count-num-2">0</span>
                                        <span class="cmp-plugins-count-num-3">0</span>
                                        <span class="cmp-plugins-count-num-4">0</span>
                                    </div>
                                    <div class="cmp-plugins-title">个</div>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="cmp-plugins-count center">
                                    <div class="cmp-plugins-title">总时长</div>
                                    <div class="cmp-plugins-count-num cmp-plugins-title-now">
                                        <span class="cmp-plugins-count-num-1">0</span>
                                        <span class="cmp-plugins-count-num-2">0</span>
                                        <span class="cmp-plugins-count-num-3">0</span>
                                        <span class="cmp-plugins-count-num-4">0</span>
                                    </div>
                                    <div class="cmp-plugins-title">天</div>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="cmp-plugins-count center">
                                    <div class="cmp-plugins-title">总容量</div>
                                    <div class="cmp-plugins-count-num cmp-plugins-title-size">
                                        <span class="cmp-plugins-count-num-1">0</span>
                                        <span class="cmp-plugins-count-num-2">0</span>
                                        <span class="cmp-plugins-count-num-3">0</span>
                                        <span class="cmp-plugins-count-num-4">0</span>
                                    </div>
                                    <div class="cmp-plugins-title">T</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 cmp-center-left-col">
                <div class="panel cmp-panel">
                    <div class="panel-body">
                        <ul class="nav nav-tabs cmp-left-tabs">
                            <li class="active"><a href="#left-tab-1" data-toggle="tab">庭审排期</a></li>
                            <li class=""><a href="#left-tab-2" data-toggle="tab">庭审回顾</a></li>
                            <!--<li class=""><a href="#left-tab-3" data-toggle="tab">经典案例</a></li>-->
                        </ul>
                        <div class="tab-content cmp-left-tabs-content" id="cmp-left-tabs-content">
                            <div class="tab-pane fade active in" id="left-tab-1">
                                <ul class="media-list media-list-with-divider">
                                </ul>
                                <div class="cmp-left-tabs-link">
                                    <a href="javascript:" th:href="@{/judge/more_courting}">更多开庭>></a>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="left-tab-2">
                                <ul class="media-list media-list-with-divider">
                                </ul>
                                <div class="cmp-left-tabs-link">
                                    <a href="javascript:" th:href="@{/judge/more_review}">更多回顾>></a>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="left-tab-3">
                                <ul class="media-list media-list-with-divider">
                                </ul>
                                <div class="cmp-left-tabs-link">
                                    <a href="javascript:;">更多回顾>></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 cmp-center-map-col">
                <div class="panel cmp-panel cmp-panel-opacity">
                    <div class="panel-body">
                        <div id="cmp-center-panel">
                            <div class="group-center-video">
                                <div class="group-center-video-type">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div>合成图像</div>
                                        </div>
                                        <div class="col-md-3">
                                            <div>激励图像</div>
                                        </div>
                                        <div class="col-md-3">
                                            <div>法官图像</div>
                                        </div>
                                        <div class="col-md-3">
                                            <div>公诉图像</div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div>辩护图像</div>
                                        </div>
                                        <div class="col-md-3">
                                            <div>旁听席图像</div>
                                        </div>
                                        <div class="col-md-3">
                                            <div>上诉人图像</div>
                                        </div>
                                        <div class="col-md-3">
                                            <div>证据图像</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="group-center-video-player">
                                    <object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
                                            width="100%"
                                            height="330px"
                                            id="vlc"
                                            events="True">
                                        <param name="MRL" value=""/>
                                        <param name="ShowDisplay" value="True"/>
                                        <param name="AutoLoop" value="False"/>
                                        <param name="AutoPlay" value="False"/>
                                        <param name="Volume" value="50"/>
                                        <param name="toolbar" value="true"/>
                                        <param name="StartTime" value="0"/>
                                        <EMBED pluginspage="http://www.videolan.org"
                                               type="application/x-vlc-plugin"
                                               version="VideoLAN.VLCPlugin.2"
                                               width="100%"
                                               height="330px"
                                               toolbar="false"
                                               bgcolor="white"
                                               loop="true"
                                               text="Waiting for video"
                                               name="vlc">
                                        </EMBED>
                                    </object>
                                    <div id="pro_bar"></div>
                                </div>
                                <ul class="nav nav-tabs">
                                    <li class="active"><a href="#center-tab-1" data-toggle="tab">案件信息</a></li>
                                    <li class=""><a href="#center-tab-2" data-toggle="tab">笔录</a></li>
                                </ul>
                                <div class="tab-content cmp-center-tabs-content" id="cmp-center-tabs-content">
                                    <div class="tab-pane fade active in" id="center-tab-1">
                                        <pre>
                                        </pre>
                                    </div>
                                    <pre class="tab-pane fade" id="center-tab-2">
                                    </pre>
                                </div>
                            </div>
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel cmp-panel">
                    <div class="panel-body">
                        <div id="cmp-right" class="cmp-right">
                            <div class="group-right-search">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group form-no-margin">
                                            <label for="startTime" class="col-md-4 text-right form-label">开始时间：</label>
                                            <div class='input-group date ' id='startTime'>
                                                <input type='text' class="form-control"/>
                                                <span class="input-group-addon datetime-cus">
                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group form-no-margin">
                                            <label for="endTime" class="col-md-4 text-right form-label">截至时间：</label>
                                            <div class='input-group date ' id='endTime'>
                                                <input type='text' class="form-control"/>
                                                <span class="input-group-addon datetime-cus">
                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group form-no-margin">
                                            <label for="caseno" class="col-md-4 text-right form-label">案号检索：</label>
                                            <div class="input-group">
                                                <input type="text" class="form-control" id="caseno" placeholder="案号">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group form-no-margin">
                                            <label class="col-md-4 text-right form-label"></label>
                                            <div class="col-md-8 input-group">
                                                <button type="submit" class="btn btn-cmp-distinct btn-block"
                                                        id="submitButton">搜索
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="group-right-list">
                                <ul class="nav nav-tabs">
                                    <li class="active"><a href="#right-list-tab-1" data-toggle="tab">案件信息</a></li>
                                    <li class=""><a href="#right-list-tab-2" data-toggle="tab">核查统计</a></li>
                                </ul>
                                <div class="tab-content cmp-left-tabs-content" id="cmp-right-tabs-content">
                                    <div class="tab-pane fade active in" id="right-list-tab-1">
                                    </div>
                                    <div class="tab-pane fade" id="right-list-tab-2">
                                    </div>
                                </div>
                            </div>

                            <div class="group-right-chart">
                                <ul class="nav nav-tabs">
                                    <li class="active"><a href="#right-chart-tab-1" data-toggle="tab">开庭时长</a></li>
                                    <li class="" id="right_chart_tab_2_li"><a href="#right-chart-tab-2"
                                                                              data-toggle="tab">开庭次数</a></li>
                                </ul>
                                <div class="tab-content cmp-left-tabs-content" id="cmp-chart-tabs-content">
                                    <div class="tab-pane fade active in" id="right-chart-tab-1"
                                         style='height:100%;width:100%'>
                                        <div id="canvas" class="echart container"></div>
                                    </div>
                                    <div class="tab-pane fade" id="right-chart-tab-2" style='height:100%;width:100%'>
                                        <div id="canvas-right" class="echart container"></div>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 视频选择模态框 -->
        <div draggable="true" class="modal fade" id="select_video" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true" style="position:fixed;top:100px;background-color:white;width:25%;height:45%;left:70%;">
            <div class="modal-dialog" style="width:100%;margin:0px;">
                <div class="modal-content">
                    <div class="modal-header" style="color:blue;font-size:19px;">
                        此案件有多个开庭记录，请选择
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button>
                    </div>
                    <div class="modal-body" style="height:300px;text-align:center;overflow:auto;">
                        <!-- a标签展示区 -->
                        <table id="select_video_table" style="width:90%;"></table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>
    </div>
    <!-- end #content -->

    <!-- begin scroll to top btn -->
    <a href="javascript:;" class="btn btn-icon btn-circle btn-blue btn-scroll-to-top fade" data-click="scroll-top"><i
            class="fa fa-angle-up"></i></a>
    <!-- end scroll to top btn -->
</div>
<!-- end page container -->
<!-- ================== START IMPORT JS ================== -->
<div th:replace="head :: footer_js(~{::script})">
    <script type="text/javascript"
            th:src="@{/assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js}"></script>
    <script type="text/javascript"
            th:src="@{/assets/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js}"
            charset="UTF-8"></script>
    <script type="text/javascript" th:src="@{/assets/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>
    <script type="text/javascript" th:src="@{/assets/plugins/jquery-ui/ui/minified/jquery-ui.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/plugins/echart/echarts.js}"></script>
    <script type="text/javascript" th:src="@{/assets/plugins/echart/shine.js}"></script>
    <script type="text/javascript" th:src="@{/assets/plugins/echart/macarons.js}"></script>
    <script type="text/javascript" th:src="@{/assets/plugins/icheck-1.0.2/icheck.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/plugins/cmp-progress-bar/cmp-progress-bar.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/vlc_load.js}"></script>
    <script th:inline="javascript">
        var judgeStatistical = {
            judgeNumber: [[${judgeNumber}]],
            judgeOpenTime: [[${judgeOpenTime}]],
            judgeFileSize: [[${judgeFileSize}]]
        };
        var timeRanking = [[${timeRanking}]];
        var countRanking = [[${countRanking}]];
        var moreCourting = [[${moreCourting}]];
        var moreReview = [[${moreReview}]];
        var realName = [[${session.user.realName}]];

    </script>
    <script type="text/javascript" th:src="@{/assets/js/judge.js}"></script>
    <script>
        $(document).ready(function () {
            App.init();
        });
    </script>
</div>
</body>
</html>
